<template>
	<view class="container">
		<tui-card :title="repairContentTitle" style="padding-top: 10rpx;">
			<template v-slot:body>
				<view class="tui-default">
					{{repair.repairContent}}
				</view>
			</template>
		</tui-card>
		<tui-list-view color="#777" style="margin: 0 30rpx;">
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">地址</text>
					<view class="tui-right">{{repair.repairPlace}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell last="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">电话</text>
					<view class="tui-right">{{repair.telephone}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<view class="pic-box" style="background-color: #fff;margin: 0 15px;">
			<view class="pic-item" v-for="(item, index) in repair.fileList" :key="index">
				<image :src="item.filePath" @tap="previewPic" :data-urls="item.filePath"></image>
			</view>
		</view>
		<view class="fb-mobile" style="margin: 0 15px;">
			<view class="label">报修状态</view>
			<view class="mobile-box">
				<tui-radio-group name="报修状态" v-model="repair.status">
					<block v-for="(item,index) in radioItems" :key="index">
						<tui-list-cell>
							<view class="thorui-align__center">
								<tui-radio :checked="item.checked" :value="item.value" color="#07c160"
									borderColor="#999">
								</tui-radio>
								<text class="tui-text">{{item.name}}</text>
							</view>
						</tui-list-cell>
					</block>
				</tui-radio-group>
			</view>
			<view class="pic-box" style="background-color: #fff">
				<view class="pic-item" v-for="(item, index) in picTempleList" :key="index">
					<image :src="item.url" @tap="previewPic" :data-urls="item.url"></image>
					<text class="pic-delete" @tap="handleDelete" :data-src="item" :data-goods-index="index">x</text>
				</view>
				<view class="pic-item pic-handle" @tap="chooseImageTap" :data-goods-index="num">
					<tui-icon name="camera"></tui-icon>
					<text class="desc">添加图片</text>
				</view>
			</view>

			<tui-textarea flexStart placeholder="备注" v-model="repair.maintenanceResult"></tui-textarea>
			<tui-button @click="submitRepair">提交</tui-button>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				repairContentTitle: {
					text: "报修描述"
				},
				repair: {
					repairContent: '', //报修描述
					mobile: '', //手机号
					userName: '', //用户名
					repairId: '', //ID
					fileList: [], //上报图片
					repairPlace: '', //地址
					maintenanceResult: '', // 维修结果
					status: '', //状态 0待派单 1已派单 2已完成 3转工程部 4已取消(电气水暖等原因) 5 转设备部
					maintenanceMan: '', //维修人
					maintenanceResult: '', //维修备注
					mainPicList: [] //维修图片
				},
				picTempleList: [],
				radioItems: [{
						name: '已完成',
						value: '2',
						checked: false
					},
					{
						name: '取消',
						value: '4',
						checked: false
					},
					{
						name: '转工程部',
						value: '3',
						checked: false
					},
					{
						name: '转设备部',
						value: '5',
						checked: false
					}
				]
			}
		},
		onLoad(e) {
			this.repairId = e.id;
			this.getInfo();
		},
		methods: {
			submitRepair: function(){
				let that = this;
				let status = this.repair.status;
				if (this.status == '') {
					util.toast('请选择报修类型');
					return false;
				}
				util.request('repair', {
					id:that.repairId,
					status: status,
					maintenanceResult: that.repair.maintenanceResult,
				}, 'PUT').then(function(res) {
					if (res.code === 200) {
						uni.showModal({
							content: '我们已收到您的反馈！',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						})
					}
				});
			},
			detail: function() {
				this.tui.toast('详情功能尚未完善~')
			},
			getInfo: function(e) {
				let that = this;
				let url = "repair/" + this.repairId;
				util.request(url).then(function(res) {
					if (res.code === 200) {
						that.repair = res.data;
					}
				})
			},
			previewPic(e) {
				let url = e.currentTarget.dataset.urls;
				let urls = [];
				urls.push(url);
				console.log(urls);
				uni.previewImage({
					current: 0,
					urls: urls
				})
			},
			handleDelete(e) {
				console.log("handleDelete..................................");
				let that = this;
				let item = e.currentTarget.dataset.src;
				let goodsIndex = e.currentTarget.dataset.goodsIndex;
				const keyVal = e.currentTarget.dataset.value;
				util.request("upload/deleteFile", {
					id: item.id
				}).then(function(res) {
					if (res.code === 200) {

					}
				});

				// that.picTempleList.splice(goodsIndex,1);
			},
			chooseImageTap: function(e) {
				let that = this;
				let goodsIndex = e.currentTarget.dataset.goodsIndex;
				uni.showActionSheet({
					itemList: ['从相册中选择', '拍照'],
					itemColor: "#ED3B2F",
					success: function(res) {
						if (!res.cancel) {
							if (res.tapIndex == 0) {
								that.chooseWxImage('album', goodsIndex)
							} else if (res.tapIndex == 1) {
								that.chooseWxImage('camera', goodsIndex)
							}
						}
					}
				})
			},
			chooseWxImage: function(type, goodsIndex) {
				let _this = this;
				let userToken = uni.getStorageSync('token');
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: [type],
					success: function(res) {
						var tempFilePaths = res.tempFilePaths
						for (const key in tempFilePaths) {
							uni.uploadFile({
								url: util.interfaceUrl + 'upload/uploadForRepair',
								filePath: tempFilePaths[key],
								name: 'file',
								header: {
									// #ifndef H5
									'content-type': 'multipart/form-data',
									// #endif
									'token': userToken
								},
								formData: {
									repairId: _this.repairId,
									fileType: '1'		//0上报 1维修
								},
								success: function(ress) {
									uni.hideLoading();
									let data = JSON.parse(ress.data.replace(/\ufeff/g, "") ||"{}")
									console.log(data)
									if (data.code == 200) {
										//返回图片地址
										_this.picTempleList.push(data);
									} else {
										//utils.toast(res.msg);
									}
								},
								fail: function(res) {
									console.log(res);
									//utils.toast("网络不给力，请稍后再试~")
								}
							});
						}
					}
				})
			},
		},
	}
</script>

<style>
	page {
		background: #EDEDED;
	}

	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-title {
		width: 100%;
		padding: 70rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #666;
	}

	.tui-default {
		padding: 20rpx 30rpx;
	}

	.tui-article {
		position: relative;
	}

	.tui-article-img {
		width: 100%;
		height: 300rpx;
		display: block;
	}

	.tui-article-title {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}

	.tui-cell-title {
		font-size: 32rpx;
		font-weight: 500;
		padding: 0 10rpx;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-cell-img {
		height: 160rpx;
		width: 160rpx;
	}

	.tui-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-mr {
		margin-right: 20rpx;
	}


	.tui-flex-pic {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		background: #fff;
		padding: 0 120rpx;
	}

	.tui-flex-pic image {
		width: 32%;
		margin-bottom: 2%;
	}

	.tui-content {
		padding: 0rpx 30rpx 20rpx 120rpx;
		box-sizing: border-box;
		font-size: 34rpx;
		font-weight: 400;
		color: #333;
	}

	.tui-color-gray {
		color: #ccc;
	}

	.tui-pleft {
		padding-left: 120rpx;
	}

	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		/* padding-left: 20rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 15px;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 30rpx;
	}

	.pic-box {
		margin-top: 20rpx;
		font-size: 22rpx;
		padding: 10px 20px 20px 20px;
		display: flex;
		flex-wrap: nowrap;
	}

	.pic-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin-right: 10px;
		display: inline-block;
	}

	.pic-item image {
		width: 100%;
		height: 100%;
	}

	.pic-item .pic-delete {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		color: #fff;
		line-height: 30rpx;
		top: -15rpx;
		right: -15rpx;
		border-radius: 50%;
		background-color: red;
	}

	.pic-handle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}

	.pic-item.pic-handle image {
		width: 100rpx;
		height: 100rpx;
	}

	.pic-handle .desc {
		padding-top: 10px;
		font-size: 0.9em;
		color: #9b9b9b;
	}
</style>